<template>
  <AppTitle title="个人中心"></AppTitle>
  <div class="accountCenter-box">
  <div class="account-center">
    <p>管理员ID:{{ accountCenterInfo.id }}</p>
    <hr>
    <p>账号:{{ accountCenterInfo.account }} </p>
    <hr>
    <p>用户组:{{ accountCenterInfo.userGroup }} </p>
    <hr>
    <p>创建时间:{{ formatTime(accountCenterInfo.ctime) }}</p>
    <hr>
    <p>管理员头像：</p>
    <el-upload
    class="avatar-uploader"
    :action="'/api' + '/users/avatar_upload?id=' + accountCenterInfo.id"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="accountCenterInfo.imgUrl" :src="'/api' + accountCenterInfo.imgUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
  </div>
  </div>
</template>

<script setup>
import AppTitle from '@/components/AppTitle.vue'
import dayjs from 'dayjs'
import {userStore} from '@/stores/userStore'
import { ref,reactive } from 'vue'
import { serverUrl } from '@/utils/common';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {accountInfo} from '@/api/account'

const store = userStore();
const accountCenterInfo = reactive({
  id:'',
  account:'',
  userGroup:'',
  ctime:'',
  imgUrl:''
})
let user = JSON.parse(sessionStorage.getItem('user'));
// 头像上传类型判断
const beforeAvatarUpload = (file) => {
    console.log(file);
    if(!file.type.includes('image')){
      ElMessage.error('文件类型不是图片');
      return false;
    }
    if(file.size >2*1024*1024){
      ElMessage.error('文件大小不能超过 2M');
      return false;
    }
  return true ;  
}
const handleAvatarSuccess = () => {
  ElMessage.success('头像上传成功');
  // router.go(0)
  getAccountCenter()
  // 修改poinia中状态 同步头像
  store.changeUserInfoChange()
}


const getAccountCenter = async () => {
  let res = await accountInfo({id:user.id});
  console.log(res)
  accountCenterInfo.id = res.accountInfo.id;
  accountCenterInfo.account = res.accountInfo.account;
  accountCenterInfo.userGroup = res.accountInfo.userGroup;
  accountCenterInfo.ctime = res.accountInfo.ctime;
  accountCenterInfo.imgUrl = res.accountInfo.imgUrl;
}
getAccountCenter();
// 时间格式化
const formatTime = (time)=>{
   return  dayjs(time).format('YYYY-MM-DD HH:mm:ss');       
}
</script>

<style lang="scss" scoped>
.accountCenter-box{
  width: 100%;
  height: 330px;
  overflow: hidden;
}
.account-center{
  width: 100%;
  height: 330px;
  padding: 15px;
  img{
    width: 178px;
    height: 178px;
  }
}
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>